<template>
    <div class="monitor-status" v-if="pageData">
        <div class="monitor-over-cheek" v-if="pageData.screenTime">
            2017 年累积实施检测设备状态<br /><b>{{pageData.screenTime}}</b> 小时
        </div>
        <div class="dial">
            <div class="circle-1"></div>
            <div class="circle-2"></div>
            <div class="hour"></div>
            <div class="minute"></div>
        </div>
        <div class="dialog">
            <p><span id="text-1" ></span><span id="num-1" class="num" style="padding: 0 10px"></span><span id="unit-1" hidden></span></p>
            <p><span id="num-2" class="num"></span><span id="text-2" ></span></p>
        </div>
        <div class="icon-box">
            <div class="icon-1"></div>
            <div class="icon-2"></div>
            <div class="icon-3"></div>
            <div class="icon-4"></div>
            <div class="icon-5"></div>
        </div>
        <!--折线＋描述-->
        <div class="classify-1 classifies" v-if="pageData.record">
            <div class="lines">
                <svg class='svg-line' x="0px" y="0px" viewBox="0 0 110 200">
                    <path id="svg-path-1" class="svg-path"></path>
                    <circle class="dot-circle" xmlns="http://www.w3.org/2000/svg" cx="49" cy="13" r="5" stroke="#2eeec9" fill="#2eeec9"></circle>
                </svg>
            </div>
            <div class="description desc-1">
                <div class="desc">
                    <p class="time">{{pageData.record.recordTime}}</p>
                    <p class="str">{{pageData.record.recordDepartment}}录入<br />第一台：<br />{{pageData.record.recordEquipment}}</p>
                </div>
            </div>
        </div>
        <div class="classify-2 classifies" v-if="pageData.newly">
            <div class="lines">
                <svg class='svg-line' x="0px" y="0px" viewBox="0 0 110 200">
                    <path id="svg-path-2" class="svg-path"></path>
                    <circle class="dot-circle" xmlns="http://www.w3.org/2000/svg" cx="49" cy="51" r="5" stroke="#2eeec9" fill="#2eeec9"></circle>
                </svg>
            </div>
            <div class="description desc-2">
                <div class="desc">
                    <p class="str">2017 新增设备 <br><span>{{pageData.newly}}</span> 台</p>
                </div>
            </div>
        </div>
        <div class="classify-3 classifies" v-if="pageData.repair">
            <div class="lines">
                <svg class='svg-line' x="0px" y="0px" viewBox="0 0 110 200">
                    <path id="svg-path-3" class="svg-path"></path>
                    <circle class="dot-circle" xmlns="http://www.w3.org/2000/svg" cx="60" cy="166" r="5" stroke="#2eeec9" fill="#2eeec9"></circle>
                </svg>
            </div>
            <div class="description desc-3">
                <div class="desc">
                    <p class="time">{{pageData.repair.repairTime}}</p>
                    <p class="str">{{pageData.repair.repairDepartment}}报修<br>第一台:<br>{{pageData.repair.repairEquipment}}</p>
                </div>
            </div>
        </div>
        <div class="classify-4 classifies" v-if="pageData.complete">
            <div class="lines">
                <svg class='svg-line' x="0px" y="0px" viewBox="0 0 110 200">
                    <path id="svg-path-4" class="svg-path"></path>
                    <circle class="dot-circle" xmlns="http://www.w3.org/2000/svg" cx="39" cy="130" r="5" stroke="#2eeec9" fill="#2eeec9"></circle>
                </svg>
            </div>
            <div class="description desc-4">
                <div class="desc">
                    <p class="time">{{pageData.complete.completeTime}}</p>
                    <p class="str">{{pageData.complete.completeDepartment}}完修<br>第一台:<br>{{pageData.complete.completeEquipment}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        props: {
            pageData: {
                type: [Array, Object]
            }
        },
        data () {
            return {
            }
        },
        mounted () {
        },
        created(){
        },
        computed: {
        },
        watch: {
            pageData: function (n, o) {
                if( !this.pageData)  return
           }
        },
        components:{}
    }
</script>
<style lang='scss' rel="stylesheet/scss">
    .publickPostion{
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .dialPosition{
        position: absolute;
        background-position: center center ;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }
    .monitor-status{
        background-image: url("../../assets/images/monitor-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        .monitor-over-cheek{
            font-size: 1.6rem;
            position: absolute;
            top: 6%;
            left: 15%;
            line-height: 3rem;
            >b{
                font-family: 'DIGIT';
                font-size: 2.5rem;
            }
        }
        .dial{
            background-image: url("../../assets/images/dial-bg.png");
            background-position: center center;
            background-repeat: no-repeat;
            position: absolute;
            width: 100%;
            height: 30%;
            top: 25%;
            .circle-1{
                background-image: url("../../assets/images/monitor-cicle-1.png");
                @extend .dialPosition;
                animation: clockwise 3s linear infinite;
            }
            .circle-2{
                background-image: url("../../assets/images/monitor-cicle-2.png");
                @extend .dialPosition;
                animation: counterclockwise 3s linear infinite ;
            }
            .minute{
                background-image: url("../../assets/images/minute.png");
                @extend .dialPosition;
                animation: clockwise .5s linear infinite ;
            }
            .hour{
                background-image: url("../../assets/images/hour.png");
                @extend .dialPosition;
                animation: clockwise 6s linear infinite ;
            }
        }
        .dialog{
            background-image: url("../../assets/images/dialog-bg.png");
            background-repeat: no-repeat;
            background-size: 100% auto;
            width: 100%;
            height: 26%;
            position: absolute;
            bottom: 0;
            left:0;
            >p{
                color: #2eeec9;
                font-size: 3rem;
                margin: 0 0 0 12%;
                >span.num{
                    font-size: 5rem;
                    font-family: 'DIGIT';
                }
                &:nth-child(1){
                    margin: 10% 0 2% 12%;
                }
            }
        }
        .icon-box{
            width: 100%;
            height: 42%;
            position: absolute;
            top: 20%;
            //border: 1px solid white;
            .icon-1{
                background-image: url("../../assets/images/monitor-icon-3.png");
                background-position: center bottom;
                background-repeat: no-repeat;
                position: absolute;
                width: 100%;
                height: 10%;
                right: 0;
                top:0;
                animation: iconAni1 4s infinite linear;
            }
            .icon-2{
                background-image: url("../../assets/images/monitor-icon-2.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                position: absolute;
                width: 7%;
                height: 9%;
                top: 30%;
                right: 16%;
                animation: iconAni2 4s infinite linear;
            }
            .icon-3{
                background-image: url("../../assets/images/monitor-icon-1.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                position: absolute;
                width: 5%;
                height: 7%;
                right: 19%;
                top: 63%;
                animation: iconAni3 4s infinite linear;
            }
            .icon-4{
                background-image: url("../../assets/images/monitor-icon-3.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                position: absolute;
                width: 5%;
                height: 7%;
                bottom: 5%;
                left: 47%;
                animation: iconAni4 4s infinite linear;
            }
            .icon-5{
                background-image: url("../../assets/images/monitor-icon-2.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                position: absolute;
                width: 6%;
                height: 8%;
                top: 30%;
                left: 18%;
                animation: iconAni5 4s infinite linear;
            }
        }
        .clocks{
            width: 100%;
            height: 30%;
            height: 12%;
            top: 36%;
            position: absolute;
            border: 1px solid #2eeec9;
        }
        .classifies{
            width: 50%;
            height: 40%;
            position: absolute;
            .lines{
                position: absolute;
                width: 110px;
                height: 200px;
                .svg-line{
                    position: absolute;
                    .svg-path{
                        fill: none;
                        stroke: #2eeec9;
                        stroke-width: 4px
                    }
                    .dot-circle{
                        opacity: 0;
                    }
                }
            }
            .description{
                position: absolute;
                width: 20rem;
                height: 12rem;
                overflow: hidden;
                .desc{
                    width: 100%;
                    height: 100%;
                    background-image: url("../../assets/images/right-top.png");
                    @extend .publickPostion;
                    opacity:0;
                    .time{
                        font-family: 'DIGIT';
                        color: #2eeec9;
                        font-size: 1.7rem;
                        margin: 3rem 0 0.5rem 3rem;
                    }
                    .str{
                        font-size: 1.8rem;
                        padding: 0 3rem;
                        color: #2eeec9;
                        margin:0;
                        letter-spacing: 1.5px;
                    }
                }
            }
        }
        .classify-1{
            right: 0;
            .lines{
                bottom: 17%;
                right: 41%;
            }
            .desc-1{
                bottom: 48%;
                right: 4%;
                width: 26rem;
                height: 14.5rem;
            }
        }
        .classify-2{
            left: 0;
            .lines{
                bottom: 17%;
                right: 34%;
            }
            .desc-2{
                bottom: 43%;
                left: 27%;
                height: 10rem;
                width: 19.5rem;
                .desc{
                    .str{
                        margin: 2.5rem 0 0 0;
                        >span{
                            font-family: DIGIT;
                            font-size: 3rem;
                        }
                    }
                }
            }
        }
        .classify-3{
            right: 0;
            top:40%;
            .lines{
                top: 22%;
                right: 47%;
            }
            .desc-3{
                top: 47%;
                left: 16%;
                width: 24rem;
                height:14.5rem;
            }
        }
        .classify-4{
            left: 0;
            top:40%;
            .lines{
                top: 19%;
                left: 46%;
            }
            .desc-4{
                top: 39%;
                left: 16%;
                width: 22rem;
                height: 14.5rem;
            }
        }
    }
    .showCurrentPageModule{
        .dot-circle{
            animation: defaultOpacityAni .1s linear .7s;
            animation-fill-mode: forwards;
        }
        .classifies{
            .desc{
                animation: defaultOpacityAni 0.2s linear 1.2s;
                animation-fill-mode: forwards;
            }
        }
    }

    @keyframes iconAni1 {
        50%{top: 1%;}
        100%{top: 0;}}
    @keyframes iconAni2 {
        50%{right: 15%;}
        100%{right: 16%;}
    }
    @keyframes iconAni3 {
        50%{right: 18%;top:64%;}
        100%{right: 19%;top:63%;}
    }
    @keyframes iconAni4 {
        50%{left: 48%;}
        100%{left: 47%;}
    }
    @keyframes iconAni5 {
        50%{left: 17%;}
        100%{right: 18%;}
    }
</style>